<template>
	<view class="page">
		<topVue title="修改密码"></topVue>
		<view class="inpVue margin60 flex align-center padding-row30">
			<image src="../../static/phone.png" style="width: 44rpx; height: 44rpx;"></image>
			<input type="text" placeholder="请输入手机号" placeholder-style="color: #6B7280; font-size: 28rpx;" v-model="phone"/>
		</view>
		<view class="inpVue margin20 flex align-center padding-row30 relative">
			<image src="../../static/code.png" style="width: 44rpx; height: 44rpx;"></image>
			<input type="text" placeholder="请输入验证码" placeholder-style="color: #6B7280; font-size: 28rpx;" v-model="code"/>
			<view class="code absolute" @click="sendFun()">{{text }}</view>
		</view>
		<view class="inpVue margin20 flex align-center padding-row30">
			<image src="../../static/lock.png" style="width: 44rpx; height: 44rpx;"></image>
			<input type="password" placeholder="输入登录密码" placeholder-style="color: #6B7280; font-size: 28rpx;" v-model="pwd"/>
		</view>
		<view class="inpVue margin20 flex align-center padding-row30">
			<image src="../../static/lock.png" style="width: 44rpx; height: 44rpx;"></image>
			<input type="password" placeholder="确认登录密码" placeholder-style="color: #6B7280; font-size: 28rpx;" v-model="rePwd"/>
		</view>
		<view class="loginBtn margin50" @click="loginByCode()">确认</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				phone: "",
				code: "",
				pwd: "",
				rePwd: "",
				text: "获取验证码",
				isSend: false,
			}
		},
		methods: {
			// 发送验证码
			async sendFun(){
				if(this.isSend) return
				this.isSend = true;
				if(!this.$u.test.mobile(this.phone)) return this.$u.toast("请输入正确手机号")
				const result = await this.$request("/app-api/member/auth/send-sms-code", "POST", {
					mobile: this.phone,
					scene: 1
				})
				console.log(result)
				if(result.code===0) {
					this.$u.toast("验证码已发送")
					let count = 60;
					this.text = `${count}s`;
					let timer = setInterval(() => {
						count--;
						this.text = `${count}s`;
						if (count === 0) {
							clearInterval(timer);
							this.text = '获取验证码';
							this.isSend = false;
						}
					}, 1000);
				}else{
					this.isSend = false;
					this.$u.toast(result.msg)
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.inpVue {
		width: 690rpx;
		height: 88rpx;
		background: #F3F4F6;
		border-radius: 16rpx;
		input {
			flex: 1;
			height: 88rpx;
			color: #333;
			font-size: 28rpx;
			padding-left: 20rpx;
		}
		.loginType {
			color: #1CC289;
		}
		.forget {
			color: #6B7280;
		}
		.code {
			width: 200rpx;
			height: 88rpx;
			background: linear-gradient(to right, #1CC289, #60A5FA);
			top: 0;
			right: 0;
			border-radius: 0 16rpx 16rpx 0;
			color: #fff;
			text-align: center;
			line-height: 88rpx;
		}
		text {
			color: #1CC289;
		}
	}
	.loginBtn {
		width: 690rpx;
		height: 92rpx;
		background: linear-gradient(to right, #1CC289, #60A5FA);
		border-radius: 15rpx;
		line-height: 92rpx;
		text-align: center;
		color: #fff;
		font-size: 30rpx;
		font-weight: 600;
	}
</style>